<template>
  <el-card
    shadow="none"
  >
    <div style="display: flex; justify-content: space-between;align-items: flex-end;">
      <span style="font-size: 16px;font-weight:bold">{{ cmName }}</span>
      <el-button
        v-permission="['clusterOverview:cm']"
        type="success"
        @click="navToCMUrl"
      >CM地址</el-button>
    </div>

    <el-tag
      type="info"
      style="margin-top: 0.6rem;color:black"
    >Hdfs总容量使用情况：{{ hdfsUse }}</el-tag>

    <div style="display: flex; margin-top: 0.6rem;flex-wrap: wrap;">
      <el-tag>服务状态</el-tag>
      <ServerStatus
        v-for="item in serviceRealTime"
        :key="item.type"
        :title="item.type"
        :state="item.healthSummary"
      />
    </div>

    <div style="display: grid;grid-template-columns: repeat(2,1fr);gap:0.6rem; margin-top: 0.6rem;">
      <div style="border: 1px solid #e9f0f7; padding: 8px; border-radius: 3px;">
        <span style="font-size:13px;font-weight:bold">资源使用情况</span>
        <div>
          <span>yarn-cpu</span>
          <el-progress
            :color="customColors"
            :percentage="+resourceUsage.yarnCpu"
          />
        </div>
        <div>
          <span>yarn-内存</span>
          <el-progress
            :color="customColors"
            :percentage="+resourceUsage.yarnMemo"
          />
        </div>
        <div>
          <span>impala-内存</span>
          <el-progress
            :color="customColors"
            :percentage="+resourceUsage.impalaMemo"
          />
        </div>
      </div>

      <div style="border: 1px solid #e9f0f7; padding: 8px; border-radius: 3px;">
        <span style="font-size:13px;font-weight:bold">作业数</span>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem">
          <el-tooltip
            v-for="(value,key) in taskCount"
            :key="key"
            :content="getTaskName(key)"
          >
            <el-tag
              :type="getTaskStateColor(key)"
            >
              {{ value }}
            </el-tag>
          </el-tooltip>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import ServerStatus from './ServerStatus.vue'

export default {
  components: {
    ServerStatus
  },
  props: {
    resourceUsage: {
      type: Object,
      default: () => ([{yarnCpu: 0, yarnMemo: 0, impalaMemo: 0}])
    },

    serviceRealTime: {
      type: Array
    },
    taskCount: {
      type: Object,
      default: () => ([{yarnSum: 0, yarnRunning: 0, yarnFailed: 0, impalaSum: 0, impalaRunning: 0, impalaFailed: 0}])
    },
    hdfsUse: {
      type: String,
      default: ''
    },
    cmName: {
      type: String,
      default: ''
    },
    cmUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      customColors: [
        {color: '#67c23a', percentage: 50},
        {color: '#ebb563', percentage: 80},
        {color: '#ff7676', percentage: 100}
      ]
    }
  },
  methods: {
    navToCMUrl() {
      window.open(this.cmUrl)
    },
    getTaskStateColor(name) {
      if (!name) return ''
      if (name.includes('Sum')) {
        return 'info'
      }
      if (name.includes('Running')) {
        return ''
      }
      if (name.includes('Failed')) {
        return 'danger'
      }
    }, getTaskName(name) {
      return name.replace('Sum', '今日总作业数').replace('Running', '今日运行中作业数').replace('Failed', '今日失败作业数')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
